<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            perspective: 800px;
        }
        
        .box {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            transform-style: preserve-3d;
            animation-name: text;
            animation-duration: 20s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        img {
            vertical-align: top;
        }
        
        .box1 {
            position: absolute;
            opacity: 0.7;
            transform: rotateY(90deg) translateZ(150px);
        }
        
        .box2 {
            position: absolute;
            opacity: 0.7;
            transform: rotateY(-90deg) translateZ(150px);
        }
        
        .box3 {
            position: absolute;
            opacity: 0.7;
            transform: rotateX(90deg) translateZ(150px);
        }
        
        .box4 {
            position: absolute;
            opacity: 0.7;
            transform: rotateX(-90deg) translateZ(150px);
        }
        
        .box5 {
            position: absolute;
            opacity: 0.7;
            transform: rotateY(0deg) translateZ(150px);
        }
        
        .box6 {
            position: absolute;
            opacity: 0.7;
            transform: rotateY(180deg) translateZ(150px);
        }
        
        .box7 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(90deg) translateZ(150px);
        }
        
        .box8 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(-90deg) translateZ(150px);
        }
        
        .box9 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateX(90deg) translateZ(150px);
        }
        
        .box10 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateX(-90deg) translateZ(150px);
        }
        
        .box11 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(0deg) translateZ(150px);
        }
        
        .box12 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(180deg) translateZ(150px);
        }
        
        .box13 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(90deg) translateZ(150px);
        }
        
        .box14 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(-90deg) translateZ(150px);
        }
        
        .box15 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateX(90deg) translateZ(150px);
        }
        
        .box16 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateX(-90deg) translateZ(150px);
        }
        
        .box17 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(0deg) translateZ(150px);
        }
        
        .box18 {
            display: none;
            position: absolute;
            opacity: 0.7;
            transform: rotateY(180deg) translateZ(150px);
        }
        
        @keyframes text {
            form {
                transform: rotateX(0deg) rotateZ(0deg);
            }
            to {
                transform: rotateX(360deg) rotateZ(360deg);
            }
        }
        
        .box:hover .box7,
        .box:hover .box8,
        .box:hover .box9,
        .box:hover .box10,
        .box:hover .box11,
        .box:hover .box12 {
            display: block;
        }
        
        .box:hover .box1,
        .box:hover .box2,
        .box:hover .box3,
        .box:hover .box4,
        .box:hover .box5,
        .box:hover .box6 {
            display: none;
        }
        
        .box:active .box1,
        .box:active .box2,
        .box:active .box3,
        .box:active .box4,
        .box:active .box5,
        .box:active .box6,
        .box:active .box7,
        .box:active .box8,
        .box:active .box9,
        .box:active .box10,
        .box:active .box11,
        .box:active .box12 {
            display: none;
        }
        
        .box:active .box13,
        .box:active .box14,
        .box:active .box15,
        .box:active .box16,
        .box:active .box17,
        .box:active .box18 {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <img src="./图1.jpg">
        </div>
        <div class="box2">
            <img src="./图2.jpg">
        </div>
        <div class="box3">
            <img src="./图3.jpg">
        </div>
        <div class="box4">
            <img src="./图4.jpg">
        </div>
        <div class="box5">
            <img src="./图5.jpg">
        </div>
        <div class="box6">
            <img src="./图6.jpg">
        </div>
        <div class="box7">
            <img src="./图2.1.jpg">
        </div>
        <div class="box8">
            <img src="./图2.2.jpg">
        </div>
        <div class="box9">
            <img src="./图2.3.jpg">
        </div>
        <div class="box10">
            <img src="./图2.4.jpg">
        </div>
        <div class="box11">
            <img src="./图2.5.jpg">
        </div>
        <div class="box12">
            <img src="./图2.6.jpg">
        </div>
        <div class="box13">
            <img src="./图3.1.jpg">
        </div>
        <div class="box14">
            <img src="./图3.2.jpg">
        </div>
        <div class="box15">
            <img src="./图3.3.jpg">
        </div>
        <div class="box16">
            <img src="./图3.4.jpg">
        </div>
        <div class="box17">
            <img src="./图3.5.jpg">
        </div>
        <div class="box18">
            <img src="./图3.6.jpg">
        </div>
    </div>
</body>

</html>